<template>
<div class="child1">
	<h3>子组件1</h3>
		<h4>玩具：{{ toy }}</h4>
		<h4>弟弟给的电脑：{{ computer }}</h4>
		<h4>父组件给的蛋糕：{{ fathercake }}</h4>
		<button @click="emitter.emit('send-toy',toy)">玩具给弟弟</button>
		<button @click="emitter.emit('send-toy-tofather',toy)">玩具给父组件</button>
</div>
</template>
<script lang="ts" setup name="ChildDemo1">
import { ref,onUnmounted } from 'vue'
import emitter from '@/utils/emitter'
import { useChildDemo1 } from '@/hooks/use04emittTs';//ts代码实现,实现代码的拆分
let {toy,computer,fathercake,Child1bindEvents}=useChildDemo1()
Child1bindEvents()
</script>
<style scoped>
	.child1{
		margin-top: 50px;
		background-color: skyblue;
		padding: 10px;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
	}
	.child1 button{
		margin-right: 10px;
	}
</style>